<template>
    <div class="footer">
        {{ word }}
    </div>
</template>

<script>
//页脚
export default {
    name: 'Footer',
    data() {
        return {
            word: '',//存储显示的的诗句
            wordList: [//随机诗句数组
               '唯有牡丹真国色，花开时节动京城。',
               '冲天香阵透长安，满城尽带黄金甲。',
               '我爱幽兰异众芳，不将颜色媚春阳。',
               '疏影横斜水清浅，暗香浮动月黄昏。',
               '荷叶罗裙一色裁，芙蓉向脸两边开。',
               '山深未必得春迟，处处山樱花压枝。',
               '纵被春风吹作雪，绝胜南陌碾成尘。',
               '只道花无十日红，此花无日不春风。',
               '人间四月芳菲尽，山寺桃花始盛开。'

            ],
        }
    },
    methods: {
        //随机选取一条诗句赋给word
        getWord() {
            this.word = this.wordList[Math.floor(Math.random() * this.wordList.length)];
        },
    },
    //监听路由，路由变化自动更新getWord
    watch: {
        $route() {
            this.getWord();
        }
    },
}
</script>

<style scoped>
.footer {
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    background-color: #c0e9ff;
    height: 50px;
    color: #6699FF;
}
</style>